<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="fa/css/font-awesome.css">
    <style type="text/css">
	.fa{
	    font-size: 30px;
		color: white;
		line-height: 60px;
	}
	.one,.two,.three{
		width: 60px;
		height: 60px;
		border-radius: 50%;
		text-align: center;
		margin: 5px 10px;
		box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
	}
    .one{
    	background-color: #FF5722;
    	float: left; 
    }
    .two{
    	background-color: teal;
    	float: left;
    }
    .three{
    	background-color: #43A047;
    	float: left;
    }
    .three .fa:hover{
    	color: black;
    }
    .one:hover{
    	background-color: #FF7043;
    }
    .two:hover{
    	background-color: #4DB6AC;
    }
</style>
</head>
<body>
	<div class="one">
		<i class="fa fa-cloud">
	    </i>
	</div>
	<div class="two">
		<i class="fa fa-comments"></i>
	</div>
	<div class="three">
		<i class="fa fa-car"></i>
	</div>
</body>
</html>